<script setup lang="ts">
import router from "@/router";
import pageTop from "@/components/pageTop.vue";
import { commonSearch, getCommonSearchMenu, } from "@/network/api";
import { useRouter } from "vue-router";
import Products from "./components/Products.vue";
import News from "./components/News.vue";
import Support from "./components/Support.vue";
import seriesRadio from "./components/seriesRadio.vue";
import { ref, reactive, watch } from "vue";

watch(
  () => router.currentRoute.value.query.keyword,
  (val) => {
    data.keywords = String(val);
    getSearchType();

  }
);

let data = reactive({
  seriesLift: {
    tags: [] as any[],
  },
  cardType: "products",
  keywords: String(useRouter().currentRoute.value.query.keyword),
  page: 1,
  pageSize: 5,
  dataList: [] as any[],
  count: 0,
  searchNumber: 0,
  loading: false,
});

// data.seriesLift.tags = [
//   { label: "Display", value: 12, type: "products" },
//   { label: "News", value: 2, type: "news" },
//   { label: "Support", value: 0, type: "support" },
// ];

const handleSerchInput = (keyword: string) => {
  data.keywords = keyword;
  router.push({
    path: "/searchData",
    query: {
      keyword,
    },
  });
  getSearchType();
};

const getSearchType = () => {
  getCommonSearchMenu({
    keywords: data.keywords,
  }).then((res) => {
    console.log(res, "res");
    
    data.seriesLift.tags = res.data;
    data.searchNumber = 0;
    res.data.map((res_: any) => {
      data.searchNumber += res_.value;
    });
    searchList();
  });
};

const searchList = () => {
  data.loading = true;
  console.log("切换");

  commonSearch({
    keywords: data.keywords,
    type: data.cardType,
    page: Number(data.page),
    pageSize: Number(data.pageSize),
  }).then((res) => {
    data.dataList = res.data.list;
    data.count = res.data.count;
    data.loading = false;
  });
};

const handleCheckList = (value: any) => {
  data.cardType = value;
  data.page = 1;
  searchList();
};

getSearchType();
</script>

<template>
  <div class="content">
    <div class="title">
      <span class="bigTitle color1d1d"
        >{{ data.searchNumber }} 搜索结果关于 "{{ data.keywords }}"</span
      >
    </div>
  </div>
  <div v-loading="data.loading" element-loading-text="Loading...">
    <div class="content">
      <div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="xs_Radio">
            <seriesRadio
              :lists="data.seriesLift"
              :val="data.keywords"
              seriesType="search"
              @handleCheck="handleCheckList"
              @handleSearch="handleSerchInput"
            ></seriesRadio>
          </el-col>
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
            <el-card shadow="never" style="border-radius: 15px; border: 0">
              <Products
                :List="data.dataList"
                :pageSize="data.pageSize"
                :count="data.count"
                v-if="data.cardType == 'products'"
                class="wishlist"
              ></Products>
              <News
                :List="data.dataList"
                :pageSize="data.pageSize"
                :count="data.count"
                v-else-if="data.cardType == 'news'"
                class="wishlist"
              ></News>
              <Support
                :List="data.dataList"
                :pageSize="data.pageSize"
                :count="data.count"
                v-else-if="data.cardType == 'support'"
                class="wishlist"
              ></Support>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");
:deep(.el-card__header) {
  padding: 20px 20px 30px 20px;
}

.content {
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.card-header {
  span {
    font-size: $secondTitle;
    font-weight: bold;
  }
}

@media screen and (max-width: 768px) {
  .xs_Radio {
    margin-bottom: 20px;
  }
  .wishlist {
    padding: 0 0px;
  }
}
</style>
